<template>
  <div class="select-role2">
    <slot>
      <div class="select-role flex flex_between" >
        <div class="roleLeft flex flex_vcenter">
          <img src="../assets/images/icon_mzfy_user.png" width="20" alt="">
          <span class="ml10 f16">{{selectedPerson}}
            <span class="f12" v-if="showCardNumber">({{selectedNumber}})</span>
          </span>
        </div>
        <div class="roleRight flex flex_vcenter" @click="rightPopup=true">
          <span class="text-right f12" style="display:inline-block;width:120px;">切换就诊人</span>
           <i class="iconfont icon-small-arrow-right t9"/>
        </div>
    </div>
    </slot>
    <mu-popup position="right" popupClass="role-popup-right" :open="rightPopup" overlayColor="#fff" :overlayOpacity="1">
      <!-- <mu-raised-button label="关闭弹框" @click="rightPopup=false" primary fullWidth/> -->
      <div class="tips-warning center">
      提示：未通过身份认证的就诊人无法进行预约挂号
      </div>

      <div style="background:#f2f2f2;padding:10px;height:100%;">
        <mu-flexbox  class="family-item bgwhite re" v-for="f in familys" :key="f.uid" >
          <mu-flexbox-item>
            <div class="family-header" @click="selectPersonHandle(f)">
              <mu-flexbox>
                <mu-flexbox-item>
                  <img src="../assets/images/middle_man.png"  v-if="f.sexcode===1" width="64" />
                  <img src="../assets/images/middle_women.png"  v-else width="64" />
                </mu-flexbox-item>
                <mu-flexbox-item :grow="4">
                  <div>
                    <span class="title">{{f.realname}}</span>
                    <span class="label label-success" v-if="f.certificationValidityPeriod === '1'">已认证</span>
                    <span class="label label-warning" v-else>未认证</span>
                  </div>
                </mu-flexbox-item>
              </mu-flexbox>
            </div>
            <div class="re min-height" v-if="f.listHisBusCard.length > 0 && showAllCards">
            <p v-for="(item, index) in f.listHisBusCard" :key="index" @click="selectCardHandle(f, item)">
              {{item.patientBusCardTypeDes}} - {{item.patientBusCardNumber}}
              <span v-if="item.patientIsHasBusCard === 1">(余额{{item.patientBusCardBalance | fixedMoney}})</span>
                      <span v-else>(未办卡)</span>
              <i class="iconfont icon-small-arrow-right fr t3 v-middle"></i>
            </p>
            </div>
          </mu-flexbox-item>
        </mu-flexbox>
      

      <mu-flexbox :gutter="0" v-show="familys.length < 6" class="pd40" style="margin-top:4em;">
        <mu-flexbox-item>
          <mu-raised-button class="submit-btn no-shadow" label="添加就诊人" to="/setting/family/add" fullWidth primary />
        </mu-flexbox-item>
      </mu-flexbox>
      <!-- <mu-flexbox :gutter="0" class="pd40 mt10">
        <mu-flexbox-item>
          <mu-raised-button class="submit-btn second no-shadow" label="管理就诊人" to="/setting/family" fullWidth primary />
        </mu-flexbox-item>
      </mu-flexbox> -->
      </div>
      
       <mu-dialog :open="showBindcardDialog">
        <div class="center">此就诊人尚未认证，去认证吗？</div>
        <div class="login center mt20">
          <mu-flat-button slot="actions"  @click="showBindcardDialog=false" label="取消"/>
          <mu-flat-button slot="actions" primary @click="bindConfirm" label="去认证"/>
        </div>
      </mu-dialog>
      <mu-dialog :open="needCardDialog">
        <div class="center">此就诊人尚未办卡，请<span class="t5">凭门诊号到医院自助机或窗口</span>进行办卡就诊。</div>
        <div class="login center mt20">
          <mu-flat-button slot="actions" primary @click="needCardDialog=false" label="确定"/>
        </div>
      </mu-dialog>

    </mu-popup>
  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
export default {
  data () {
    return {
      selectedPerson: '请选择就诊人',
      selectedNumber: '',
      rightPopup: false,
      familys: [],
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
      showBindcardDialog: false,
      needCardDialog: false
    }
  },
  props: {
    showCardNumber: {
      type: Boolean,
      default: true
    },
    showAllCards: {
      type: Boolean,
      default: true
    },
    needCard: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    this.getFamilys()
  },
  methods: {
    show () {
      this.rightPopup = true
    },
    getFamilys () {
      commonAjax(`${RESTFUL_API.listFamily}`, {[this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]}).then(res => {
        if (res.data.code === 1) {
          this.familys = res.data.data || []
          // todo
          let fp = this.familyPerson
          const IS_CERT = fp.certificationValidityPeriod === '1'
          const HAS_PATIENT_NUMBER = !!fp.patientcodeNumber
          // 已认证
          if (IS_CERT) {
            if (HAS_PATIENT_NUMBER) {
              this.selectedNumber = fp.patientcodeNumber || ''
              this.selectedPerson = fp.realname
              this.$emit('familychang', fp)
            } else {
              const first = res.data.data[0]
              if (first.patientcode) {
                if (!first.patientcodeNumber && first.listHisBusCard && first.listHisBusCard.length > 0) {
                  first.patientcodeNumber = first.listHisBusCard[0].patientBusCardNumber
                }
                this.selectedNumber = first.patientcodeNumber || ''
                this.selectedPerson = first.realname
                this.familyPerson = first
                sessionStorage.familyPerson = JSON.stringify(first)
                this.$emit('familychang', first)
              }
            }
          }
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      })
    },
    bindConfirm () {
      this.$router.push('/setting/bind-visitcard')
    },
    selectPersonHandle (f) {
      // 没认证的提示认证
      if (f.certificationValidityPeriod !== '1') {
        sessionStorage.editFamily = JSON.stringify(f)
        this.showBindcardDialog = true
        return
      }
      // 已经认证
      const cards = f.listHisBusCard
      if (cards.length === 0) {
        return
      }
      if (cards.length > 1) {
        if (!this.showAllCards) {
          this.selectCardHandle(f, cards[0])
        }
        return
      }
      this.selectCardHandle(f, cards[0])
    },
    selectCardHandle (f, item) {
      if (item.patientIsHasBusCard === 0 && this.needCard === 1) {
        this.needCardDialog = true
        return
      }
      f.patientcode = item.patientBusCardId
      f.patientcodeNumber = item.patientBusCardNumber
      f.patientBusCardBalance = item.patientBusCardBalance || 0
      sessionStorage.familyPerson = JSON.stringify(f)
      this.selectedPerson = f.realname
      this.selectedNumber = f.patientcodeNumber
      this.$emit('familychang', f)
      this.rightPopup = false
    }
  }
}
</script>

<style lang="less">
@import '../common/css/flex.css';

.mu-popup {
  &.role-popup-right {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
.family-item {
    padding: 10px;
    margin-bottom: 0.6em;
    border-radius: 4px;
    .default-arrow {
      background: url(../assets/images/tab_qhjzr.png) no-repeat;
      background-size: 40px;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      right: 0;
    }
    .family-header {
    }
    .title {
      font-size: 1.2em;
    }
    .icon-iconnan {
      color: #64A9F6;
      font-size: .9em;
    }
    .icon-iconnv {
      color: #F8868B;
      font-size: .9em;
    }
    p {
      margin: 0.6em 0 0 0;
      color: #666;
    }
    .right-button {
      position: absolute;
      right: 0;
      top: 0;
    }
    .min-height {
      // min-height: 40px;
      p {
        border-top: 1px solid #f2f2f2;
        padding: 10px 0;
      }
    }
    .label {
      border-radius: 10px;
      color: #fff;
      font-size: 12px;
      padding: 2px 6px;
      &.label-success {
        background: #0ABF71;
      }
      &.label-warning {
        background: #FF8000;
      }
    }
  }
</style>
